<template>
  <div class="R_video_content">
    <!-- no Tips -->
    <div v-if="videoList.length == 0 || !videoList" class="no-video">
        <svg xmlns="http://www.w3.org/2000/svg" width="99" height="105" viewBox="0 0 99 105" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M31.132 34.2949C29.3339 34.2949 27.8761 35.7518 27.8761 37.5498V42.9757H27.9211C27.8914 43.153 27.8761 43.3342 27.8761 43.5191V86.9278C27.8761 88.7258 29.3339 90.1836 31.132 90.1836H74.6297C76.1613 90.1836 77.4859 89.1159 77.8118 87.6198L87.2478 44.2102C87.6897 42.1811 86.1437 40.2632 84.0667 40.2632H59.8905C58.3925 40.2632 57.1771 39.0489 57.1771 37.5498C57.1771 35.7518 55.7193 34.2949 53.9212 34.2949H31.132Z" fill="#4E9BEC"/>
        <path d="M74.5406 43.3809H22.4503C20.5439 43.3809 18.9979 44.9269 18.9979 46.8332V86.9294C18.9979 88.8358 20.5439 90.3808 22.4503 90.3808H74.5406C76.447 90.3808 77.993 88.8358 77.993 86.9294V46.8332C77.993 44.9269 76.447 43.3809 74.5406 43.3809Z" fill="#DBEDFF" stroke="url(#paint0_linear_18231_36545)" stroke-width="0.392585"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M31.132 34.2959C29.3339 34.2959 27.8761 35.7537 27.8761 37.5518V42.9776H27.9211C27.8914 43.1549 27.8761 43.3361 27.8761 43.5211V86.9297C27.8761 88.7278 29.3339 90.1856 31.132 90.1856H74.6297C76.1613 90.1856 77.4859 89.1179 77.8118 87.6207L87.2478 44.2121C87.6897 42.1831 86.1437 40.2652 84.0667 40.2652H59.8905C58.3925 40.2652 57.1771 39.0508 57.1771 37.5518C57.1771 35.7537 55.7193 34.2959 53.9212 34.2959H31.132Z" fill="#7BBBFF"/>
        <path d="M13.1368 50.2266H65.5169C66.8985 50.2266 68.1086 51.1607 68.4698 52.5054L77.5584 86.4123C78.0844 88.3724 76.6195 90.3005 74.6065 90.3005H22.2255C20.8439 90.3005 19.6338 89.3664 19.2726 88.0217L10.1839 54.1148C9.65887 52.1547 11.1229 50.2266 13.1368 50.2266Z" fill="#EAF4FF" stroke="url(#paint1_linear_18231_36545)" stroke-width="0.392585"/>
        <path d="M33.8455 37.5493C33.8455 38.4484 33.1161 39.1778 32.2171 39.1778C31.318 39.1778 30.5896 38.4484 30.5896 37.5493C30.5896 36.6513 31.318 35.9219 32.2171 35.9219C33.1161 35.9219 33.8455 36.6513 33.8455 37.5493Z" fill="#EC5353"/>
        <path d="M39.2713 37.5493C39.2713 38.4484 38.5429 39.1778 37.6439 39.1778C36.7448 39.1778 36.0155 38.4484 36.0155 37.5493C36.0155 36.6513 36.7448 35.9219 37.6439 35.9219C38.5429 35.9219 39.2713 36.6513 39.2713 37.5493Z" fill="#F2DD1D"/>
        <path d="M44.6971 37.5493C44.6971 38.4484 43.9686 39.1778 43.0696 39.1778C42.1706 39.1778 41.4421 38.4484 41.4421 37.5493C41.4421 36.6513 42.1706 35.9219 43.0696 35.9219C43.9686 35.9219 44.6971 36.6513 44.6971 37.5493Z" fill="#38DF5D"/>
        <path d="M33.5131 63.774C33.4029 63.1127 33.9137 62.5107 34.5837 62.5107H39.9798C40.5108 62.5107 40.9632 62.8941 41.0504 63.4174L41.774 67.7583C41.8843 68.4196 41.3744 69.0216 40.7034 69.0216H35.3073C34.7763 69.0216 34.3239 68.6382 34.2367 68.1149L33.5131 63.774Z" fill="white"/>
        <path d="M35.1414 72.4556C35.0312 71.7933 35.5411 71.1914 36.212 71.1914H41.6081C42.1381 71.1914 42.5915 71.5748 42.6777 72.0981L43.4014 76.439C43.5116 77.1003 43.0017 77.7032 42.3308 77.7032H36.9347C36.4046 77.7032 35.9513 77.3198 35.865 76.7965L35.1414 72.4556Z" fill="white"/>
        <path d="M44.3656 63.774C44.2554 63.1127 44.7653 62.5107 45.4362 62.5107H50.8323C51.3624 62.5107 51.8157 62.8941 51.9029 63.4174L52.6266 67.7583C52.7358 68.4196 52.2259 69.0216 51.556 69.0216H46.1599C45.6289 69.0216 45.1765 68.6382 45.0893 68.1149L44.3656 63.774Z" fill="#2D8CF0"/>
        <path d="M45.9931 72.4556C45.8829 71.7933 46.3928 71.1914 47.0637 71.1914H52.4598C52.9908 71.1914 53.4432 71.5748 53.5304 72.0981L54.2541 76.439C54.3643 77.1003 53.8544 77.7032 53.1835 77.7032H47.7873C47.2564 77.7032 46.804 77.3198 46.7167 76.7965L45.9931 72.4556Z" fill="white"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M86.372 18.1572C86.372 18.1572 87.0573 19.6639 87.4426 20.9808C87.9775 22.8077 87.55 24.8847 87.4561 24.9048C86.9433 25.0169 85.2027 22.5681 85.2305 21.1313C85.2545 19.8393 86.372 18.1572 86.372 18.1572Z" fill="#FFB883"/>
        <g filter="url(#filter0_d_18231_36545)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M62.0281 23.0405C62.0281 23.0405 72.1983 20.629 75.7408 12.5674C77.2322 12.8981 79.8564 14.2073 86.2359 18.021C87.1273 18.553 85.241 21.1168 85.241 21.1168C85.241 21.1168 88.2113 23.7123 87.481 24.7494C83.2637 30.7446 79.8919 32.9222 76.0111 33.064C69.992 31.5899 62.0281 23.0405 62.0281 23.0405Z" fill="#FFE089"/>
        </g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M41.1558 39.5088C43.0986 43.4519 41.4567 48.5902 38.7175 52.7327C42.304 53.4563 48.6011 54.0668 53.5496 54.0927C53.7844 54.0937 54.4343 53.8042 54.6547 53.7774C55.9908 53.6106 56.4259 52.472 56.8247 52.0474C58.1761 49.3483 59.6732 47.2407 59.7729 44.0049C59.8246 42.3458 59.7221 40.9772 59.5659 40.4241C57.4965 39.4197 53.657 40.6398 41.1558 39.5088Z" fill="#A8E5FF"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M54.6567 50.9528C55.5663 51.755 54.8839 54.0601 53.1826 54.109C54.9893 54.039 55.9286 53.3317 56.5947 52.6358C57.2618 51.941 60.394 48.711 59.5563 40.4395C59.9761 47.4477 58.433 50.9595 54.6567 50.9528Z" fill="#7CC3E1"/>
        <defs>
            <filter id="filter0_d_18231_36545" x="62.0281" y="12.5674" width="25.5684" height="38.9459" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
            <feOffset dy="18.4488"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0.173316 0 0 0 0 0.377447 0 0 0 0 0.620833 0 0 0 0.272192 0"/>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_18231_36545"/>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_18231_36545" result="shape"/>
            </filter>
            <linearGradient id="paint0_linear_18231_36545" x1="48.3222" y1="46.3847" x2="71.4847" y2="95.4578" gradientUnits="userSpaceOnUse">
            <stop stop-color="white"/>
            <stop offset="1" stop-color="white" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="paint1_linear_18231_36545" x1="33.1993" y1="50.112" x2="28.8119" y2="88.6826" gradientUnits="userSpaceOnUse">
            <stop stop-color="white"/>
            <stop offset="1" stop-color="white" stop-opacity="0"/>
            </linearGradient>
        </defs>
        </svg>
       <span style="color:#ACB2BB">暂无数据，请先添加</span> 
    </div>

    <!-- 视频列表 -->
    <div  class="flexbox" style="flex-wrap: wrap;gap: 12px;" v-else>
    <div
      :key="index"
      class="video_item flexbox flexcenter flexbetween"
      v-for="(item, index) in videoList"
      @mouseenter="videoitemHover(item)"
      @mouseleave="removeHover(item)"
    >

      <!-- 视频图片 -->
      <div class="video_img">
        <img
          id="material_img"
          :src="item.material + '&x-oss-process=video/snapshot,t_0,f_jpg'"
          alt=""
        />
      </div>

      <!-- 视频 -->
      <transition name="fade">
        <div v-if="item.video_id == active_id" class="video-box" >
          <video
            controls
            name="media"
            style="width: 100%; height: 100%; border-radius: 14px"
            ref="videoRef"
          >
            <source :src="item.material" type="video/mp4" />
          </video>
        </div>
      </transition>

      <!-- 选择checkBox -->
      <div class="duration-L flexbox">
        <label class="custom-checkbox">
            <input type="checkbox" id="myCheckbox" ref="ckboxRef"/>
            <span class="checkmark" @click.stop="selectVideo(item, index)">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M11.2464 5.68995L11.2414 5.69398L11.2189 5.71215C11.1984 5.72891 11.1669 5.75484 11.1259 5.78951C11.0438 5.85888 10.9236 5.96303 10.7758 6.09841C10.4798 6.36957 10.0756 6.76371 9.64691 7.25225C8.77975 8.24041 7.85653 9.56476 7.47804 11.003C7.41225 11.253 7.20789 11.4424 6.95364 11.4891C6.69939 11.5357 6.44108 11.4312 6.29084 11.2209L4.62417 8.88752C4.41016 8.58791 4.47956 8.17154 4.77917 7.95754C5.07877 7.74353 5.49514 7.81293 5.70915 8.11253L6.6355 9.40944C7.17353 8.20765 7.95189 7.16233 8.64474 6.3728C9.11185 5.84051 9.55147 5.41174 9.87522 5.11519C10.0373 4.96671 10.171 4.85081 10.2653 4.77109C10.3125 4.73122 10.3499 4.70035 10.3762 4.67893L10.4071 4.65394L10.4159 4.64686L10.4186 4.64469L10.4196 4.64395C10.4197 4.64383 10.4202 4.64344 10.8333 5.16669L10.4202 4.64344C10.7092 4.41529 11.1284 4.46461 11.3566 4.7536C11.5846 5.04246 11.5351 5.46174 11.2464 5.68995Z" fill="white"/>
                </svg>
            </span>
        </label>
      </div>

      <!-- 收藏 -->
      <div class="like_icon" v-if="!iswork">
        <img src="@/assets/img/like_sec.svg" alt=""  v-if="item.is_favorite" @click="handleFavorite(item, 'cancel')">
        <img src="@/assets/img/like_def.svg" alt="" v-else  @click="handleFavorite(item, 'add')">
      </div>

      <!-- ID -->
      <div class="duration video_id " style="right:48px">
        <p>ID: {{ item.video_id }}</p>
      </div>
      
      <!-- 时长 -->
      <div class="duration " :key="'duration-' + index">
        <p>{{ formatTime(item.duration) }}</p>
      </div>
      <!-- 自定义名称 -->
      <div class="duration" style="top:38px" v-if="item.defined_name">
        <p>{{ item.defined_name }}</p>
      </div>
      <!-- 使用次数 -->
      <div class="duration" :style="item.defined_name?'top:66px':'top:38px'">
        <p>使用 {{ item.use_num || 0 }} 次</p>
      </div>

      <!-- 视频信息 -->
      <div class="video_info info_dom" v-show="!item.isvideo" @mouseenter="handleMouseEnterChild" @mouseleave="handleMouseLeaveChild(item, $event)">
        <el-tooltip :content="item.material_name" :ref="'isTooltip' + item.video_id" placement="top" :disabled="filterTooltip(item.video_id)">  
            <div class="info_title" :ref="'isOverflow' + item.video_id">{{ item.material_name }}</div>
        </el-tooltip>
        <div class="info_btn flexbox flexbetween" v-if="!IsXuqiu">
          <span class="flexbox flexcenter " @click="copyJyUrl(item)" :style="{opacity: item.on_nas?'1':'0.3'}">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="12"
              viewBox="0 0 18 12"
              fill="none"
            >
              <path
                d="M13.4231 9.12777V9.84573C13.4231 10.483 12.9065 10.9996 12.2692 10.9996H2.65385C2.0166 10.9996 1.5 10.483 1.5 9.84573V9.84573C1.5 9.17367 1.89102 8.56303 2.50142 8.28183L16.5 1.83301"
                stroke="#5C636C"
                stroke-width="1.33333"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M13.4231 2.87181V2.15385C13.4231 1.51658 12.9065 1 12.2692 1H2.65385C2.0166 1 1.5 1.51658 1.5 2.15385V2.15385C1.5 2.82317 1.89759 3.42854 2.51183 3.69445L16.5 9.75"
                stroke="#5C636C"
                stroke-width="1.33333"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            剪映
          </span>
          <span class="flexbox flexcenter" v-if="iswork" @click.stop="downloadVideo(item)" >
            <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
        >
            <path
            d="M3.33333 9.1693V11.667C3.33333 14.024 3.33333 15.2025 4.06556 15.9348C4.79779 16.667 5.97631 16.667 8.33333 16.667H11.6667C14.0237 16.667 15.2022 16.667 15.9344 15.9348C16.6667 15.2025 16.6667 14.024 16.6667 11.667V9.16699"
            stroke="#5C636C"
            stroke-width="1.33333"
            stroke-linecap="round"
            stroke-linejoin="round"
            />
            <path
            d="M12.5 10L10 12.5L7.5 10"
            stroke="#5C636C"
            stroke-width="1.33333"
            stroke-linecap="round"
            stroke-linejoin="round"
            />
            <path
            d="M10 4.16699V12.5003"
            stroke="#5C636C"
            stroke-width="1.33333"
            stroke-linecap="round"
            stroke-linejoin="round"
            />
            </svg> 
            下载
          </span>
          <span class="flexbox flexcenter" v-if="!iswork" @click="keepWorkspace(item)">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
            >
              <path
                d="M7.77777 13.8886V14.6345C7.77781 14.9264 7.72032 15.2155 7.6086 15.4852C7.49688 15.7549 7.33312 15.9999 7.12666 16.2063L6.66666 16.6663H13.3333L12.8733 16.2063C12.6669 15.9999 12.5031 15.7549 12.3914 15.4852C12.2797 15.2155 12.2222 14.9264 12.2222 14.6345V13.8886M16.6667 4.99967V12.2219C16.6667 12.6639 16.4911 13.0878 16.1785 13.4004C15.8659 13.713 15.442 13.8886 15 13.8886H4.99999C4.55797 13.8886 4.13404 13.713 3.82148 13.4004C3.50892 13.0878 3.33333 12.6639 3.33333 12.2219V4.99967M16.6667 4.99967C16.6667 4.55765 16.4911 4.13372 16.1785 3.82116C15.8659 3.5086 15.442 3.33301 15 3.33301H4.99999C4.55797 3.33301 4.13404 3.5086 3.82148 3.82116C3.50892 4.13372 3.33333 4.55765 3.33333 4.99967M16.6667 4.99967V9.99967C16.6667 10.4417 16.4911 10.8656 16.1785 11.1782C15.8659 11.4907 15.442 11.6663 15 11.6663H4.99999C4.55797 11.6663 4.13404 11.4907 3.82148 11.1782C3.50892 10.8656 3.33333 10.4417 3.33333 9.99967V4.99967"
                stroke="#5C636C"
                stroke-width="1.33333"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            工作台
          </span>
          <span class="flexbox flexcenter" v-if="iswork" @click="delVideo(item,index)">
            <svg 
                xmlns="http://www.w3.org/2000/svg" 
                width="16"
                height="18"
                viewBox="0 0 16 18" 
                fill="none">
                <path  d="M5.20786 15.4662C7.25345 16.5724 8.83247 16.3317 8.83247 16.3317C9.80536 14.8464 10.2289 13.639 10.4207 11.2444C10.4207 11.2444 6.59338 9.11192 5.72391 8.35104C5.72391 8.35104 4.50576 9.45389 3.4402 9.84639C2.63732 10.1422 1.11939 10.0973 1.11939 10.0973C1.44534 11.2687 3.12933 14.3417 5.20786 15.4662Z" stroke="#5C636C" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                <path  d="M5.72392 8.3507C6.37378 7.71242 7.50714 6.33982 8.30693 6.73115C8.92623 7.00941 9.51823 7.34482 10.0752 7.73304C10.6722 8.19166 10.4545 9.82145 10.4207 11.2441" stroke="#616C85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
                <path  d="M9.16122 7.16149C10.1907 5.58293 13.0002 0.999651 13.0002 0.999651M2.43794 12.6977C4.17738 12.3684 5.20129 11.6933 5.20129 11.6933M4.78793 15.2088C7.18571 14.1924 7.71357 12.7124 7.71357 12.7124" stroke="#616C85" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            移除
          </span>
        <el-popover 
            v-if="!iswork"
            trigger="hover"
            placement="bottom"
            class="flexbox flexcenter"
            popper-class="popover"

        >
            <ul>
                <li class="popover_item flexbox flexcenter " @click="Editmsg(item)">
                  <img src="@/assets/img/fenjing/Information_icon.svg" alt="">
                    全部信息
                </li>
                <li class="popover_item flexbox flexcenter " @click="AddTag(item)">
                   <img src="@/assets/img/fenjing/type_icon.svg" alt="">
                    素材标签
                </li>
                <li class="popover_item flexbox flexcenter " @click="AddProductTag(item)">
                   <img src="@/assets/img/fenjing/type_icon.svg" alt="">
                    产品标签
                </li>
                <li class="popover_item flexbox flexcenter " @click="downloadVideo(item)">
                   <img src="@/assets/img/fenjing/Download_icon.svg" alt="">
                    下载
                </li>
                <li class="popover_item flexbox flexcenter " @click="deldialogVisible = true,current = item">
                   <img src="@/assets/img/fenjing/del_icon.svg" alt="">
                    移除
                </li>
            </ul>
            <div slot="reference"  class="flexbox flexcenter">
                <svg 
                     xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <circle  cx="5.41626" cy="10" r="1.25" fill="#616C85"/>
                    <circle  cx="10" cy="10" r="1.25" fill="#616C85"/>
                    <circle  cx="14.5907" cy="10" r="1.25" fill="#616C85"/>
                </svg> 更多
            </div>
        </el-popover>
        </div>
      </div>
    </div>
    </div>
    <SumbitDialog 
        class="deldialog"
        width="400px"
        :dialogVisible.sync="deldialogVisible"
        sumbitColor="#F53F3F"
        sumbitText="确定删除"
        @onSubmit="del_FJ">
        <svg slot="title" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.4136 4.86706C15.3549 3.04431 12.6451 3.04431 11.5864 4.86706L3.85967 18.17C2.82129 19.9577 4.15529 22.1667 6.27331 22.1667H21.7267C23.8447 22.1667 25.1787 19.9577 24.1403 18.17L16.4136 4.86706ZM14 8.16667C13.4201 8.16667 12.95 8.63096 12.95 9.2037V15.4259C12.95 15.9987 13.4201 16.463 14 16.463C14.5799 16.463 15.05 15.9987 15.05 15.4259V9.2037C15.05 8.63096 14.5799 8.16667 14 8.16667ZM14 17.5C13.4201 17.5 12.95 17.9643 12.95 18.537C12.95 19.1098 13.4201 19.5741 14 19.5741C14.5799 19.5741 15.05 19.1098 15.05 18.537C15.05 17.9643 14.5799 17.5 14 17.5Z" fill="#F53F3F"/>
        </svg>
        <div class="dioalog_text" style="margin:20px 0">确认要删除，删除后将无法恢复！</div>
    </SumbitDialog>
    <LabelSettingDialog :taglist="tag_list" ModuleName="fenjinsingle" ref="labelsetting" />
      <EditDetail ref="EditDetail"/>
      <LabelDialog ref="labelporduct" ReqUrl="/adminapi/Materialfj/tagAdd" :taglist="Type_tag_list" TagType="3" :ProductId="productSelect.product_id" 
            @getTagList="(query)=>{getNewTagList(query,3)}"
            @submitForm="submitDataForm"/>
  </div>
</template>

<script>
import EditDetail from './EditDetail'
import LabelSettingDialog from "@/components/LabelSettings/index";
import SumbitDialog from "@/components/components/SumbitDialog";
import LabelDialog from "@/components/components/LabelDialog";
export default {
    props: ["videoList","iswork","IsXuqiu"],
  data() {
    return {
        current:null,
        deldialogVisible:false,
        tag_list:[],
        selectList:[],
        Type_tag_list:[],
        active_id:"",
        v_loading:true,
        timeoutId:undefined,
        productSelect:{}
    };
  },
  components:{
    EditDetail,
    LabelSettingDialog,
    SumbitDialog,
    LabelDialog
  },
  methods: {
   async handleFavorite(item,type){
        item.is_favorite = !item.is_favorite
        const { data: res } = await this.$http.post(
              "adminapi/materialfj/materialFavoriteAction",
              {
                  action_type:type,
                  video_id:[item.video_id]
              }
          );
          if (res.code !== 200) {
              this.$message.error(res.msg);
              return;
          } else {
            if(type == 'add'){
              item.is_favorite = 1;
            }else{
              item.is_favorite = 0;
            }
             this.$message.success(res.msg);
          }
    },
   async del_FJ(){
       const { data: res } = await this.$http.post(
                "adminapi/materialfj/materialDelete",
                {
                   list:[this.current.video_id]
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.deldialogVisible = false;
              this.$message.success('删除分镜视频成功！');
              this.$parent.getMaterialList();
            }
    },
      // 获取标签
    async getTagList(query) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:1
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.tag_list = res.data.list;
            }
        },
    filterTooltip(id){
        setTimeout(()=>{
            let cWidth = this.$refs['isOverflow'+id][0].clientWidth;
            let sWidth = this.$refs['isOverflow'+id][0].scrollWidth;
            if (sWidth > cWidth) { //超过
                this.$refs['isTooltip'+id][0].disabled = false;
            } else {
                this.$refs['isTooltip'+id][0].disabled = true;
            }
        },50)
    },
    copyJyUrl(item){
      if(!item.on_nas)return;
      //\\\\192.168.10.29\\MorphlingV4\\分镜素材库\\
      let url  = `${item.material_name}.${item.file_format}`;

      const input = document.createElement('input');
      input.value = url;
      document.body.appendChild(input);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      this.$message.success('复制成功')
    },
    async downloadVideo(item) {  
        try {  
          const videoUrl = item.material+'&response-content-type=application/octet-stream&response-content-disposition=attachment%3Bfilename%3D';
          const a = document.createElement('a');  
          a.href = videoUrl;  
          a.download = 'video.mp4'; // 设置下载文件的名称  
          a.style.display = 'none';  
          document.body.appendChild(a);  
          a.click();  
          this.v_loading = false;
          document.body.removeChild(a);  
      } catch (error) {
        console.error('下载视频失败:', error);  
      }
    },  
    //添加标签
   async AddTag(item){
        this.getTagList();
        const { data: res } = await this.$http.post("adminapi/materialfj/materialDetail",{video_id:item.video_id});
            if (res.code !== 200) {
                return this.$message.error(res.msg);
            } else {
              this.$nextTick(()=>{
                this.$refs.labelsetting.videoId = [item.video_id]
                this.$refs.labelsetting.tagpid = res.data.tag_id;
                this.$refs.labelsetting.openDialog();
                this.$refs.labelsetting.selectTag(this.tag_list[0]) 
              })
            }
    },

     async submitDataForm(addMtInfoForm){
        const { data: res } = await this.$http.post("adminapi/Materialfj/materialEditTag",{
            video_id:this.productSelect.video_id,
            tag_id:addMtInfoForm.map(e=>e.id),
            tag_type:3
          });
            if (res.code !== 200) {
                return this.$message.error(res.msg);
            } else {
               this.$nextTick(()=>{
                this.$message.success('保存成功');
                this.$refs.labelporduct.closeDialog();
                this.$refs.labelporduct.loading = false;
              })
            }
    },
    // 添加产品标签
    async AddProductTag(item){
      this.productSelect = item;
      await this.getNewTagList(undefined,3);
      const { data: res } = await this.$http.post("adminapi/materialfj/materialDetail",{video_id:item.video_id});
            if (res.code !== 200) {
                return this.$message.error(res.msg);
            } else {
              
               this.$nextTick(()=>{
                  this.$refs.labelporduct.openDialog();
                  this.$refs.labelporduct.selectTag(this.Type_tag_list[0]) 
                  this.$refs.labelporduct.tagpid = JSON.parse(JSON.stringify(res.data.product_tag_id))
              })
            }
    },
    async getNewTagList(query,tag_type) {
            const { data: res } = await this.$http.post(
                "adminapi/materialfj/tagList",
                {
                    page: 1,
                    limit: 0,
                    query:query?query:undefined,
                    tag_type:tag_type,
                    product_id:this.productSelect.product_id?this.productSelect.product_id:undefined
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
              this.Type_tag_list = res.data.list;
            }
        },
    // 添加产品标签
    // async AddProductTag(){
    //     this.getTagList();
    //     const { data: res } = await this.$http.post("adminapi/materialfj/materialDetail",{video_id:item.video_id});
    //       if (res.code !== 200) {
    //           return this.$message.error(res.msg);
    //       } else {
    //         this.$nextTick(()=>{
    //           this.$refs.labelsetting.videoId = [item.video_id]
    //           this.$refs.labelsetting.tagpid = res.data.tag_id;
    //           this.$refs.labelsetting.openDialog();
    //           this.$refs.labelsetting.selectTag(this.tag_list[0]) 
    //         })
    //       }
    // },
    //编辑素材
    Editmsg(val) {
      this.$refs.EditDetail.EchoData(val);
      this.$refs.EditDetail.dialogVisible = true;
    },
    // 工作台 - 移除素材
    delVideo(item,i){
        this.$refs.ckboxRef[i].checked = false;
        for (let index = i; index < this.$refs.ckboxRef.length; index++) {
          if(this.$refs.ckboxRef[index].checked){
            this.$refs.ckboxRef[index].checked = false;
            this.$refs.ckboxRef[index - 1].checked = true;
          }
        }
        
        this.$parent.$parent.delWorkList(item,'single')
    },
    //保存到工作台
    keepWorkspace(item,type){
        // if(this.selectList.length == 0)return this.$message.error("请先选择视频");
        this.$http.post(
            "adminapi/materialfj/workspaceMaterialAdd",{ 
              workspace_id : 0,
              video_id: type ? this.selectList.map( e => e.video_id) : [item.video_id]//this.selectList.map(e=>e.video_id)
            }).then((res) => {
            if (res.data.code == 200)
            //  this.clearSelect();
             this.$message.success(res.data.msg);
        });
        
    },
    // 全选
    selectAll() {
        const checkboxes = this.$refs.ckboxRef
        checkboxes.forEach((checkbox) => {
            checkbox.checked = true;
        });
        this.selectList = JSON.parse(JSON.stringify(this.videoList));
        this.$emit("selectVideo", this.selectList);
      
    },
    // 清空所有选中
    clearSelect() {
    const checkboxes = this.$refs.ckboxRef
    checkboxes.forEach((checkbox) => {
        checkbox.checked = false;
    });
      this.selectList = [];
      this.$emit("selectVideo", this.selectList);
    },  

    // 选中视频
    selectVideo(item) {
      console.log(item,'*****')
      const index = this.selectList.findIndex(i => i.video_id === item.video_id);
      if (index !== -1) {
        // 如果项目已经存在，则从数组中删除它
        this.selectList.splice(index, 1);
      } else {
        // 如果项目不存在，则将其添加到数组中
        this.selectList.push(item);
      }
      this.$emit("selectVideo", this.selectList);
    },

    // 视频时长转换 mm:ss
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);

      const formattedMinutes = String(minutes);
      const formattedSeconds = String(remainingSeconds).padStart(2, "0");

      return `${formattedMinutes}:${formattedSeconds}`;
    },

    // 进入视频
    videoitemHover(item) {
      this.timeoutId = setTimeout(()=>{
        this.active_id = item.video_id
        item.isvideo = true;
        this.$nextTick(()=>{
            this.$refs.videoRef[0].play();
        })
        },500)
    },
    handleMouseEnterChild(event) {  
       clearTimeout(this.timeoutId);
    },
    handleMouseLeaveChild(item, event){
      if(event.toElement.id == "material_img"){
        this.timeoutId = setTimeout(()=>{
          this.active_id = item.video_id
          item.isvideo = true;
          this.$nextTick(()=>{
              this.$refs.videoRef[0].play();
          })
        },500)
      }
    },
    // 离开视频
    removeHover(item) {
        clearTimeout(this.timeoutId); // 清除定时器
        item.isvideo = false;
        this.active_id = ""
        if(this.$refs.videoRef && this.$refs.videoRef.length > 0){
          this.$refs.videoRef[0].pause();
        } 
            
    },
  },
};
</script>
<style>
.popover{
    min-width: 94px !important;
    padding: 8px 12px;
}
</style>
<style scoped>
/* 隐藏原生的checkbox */
.custom-checkbox input[type="checkbox"] {
  display: none;
}
/* 隐藏lable   */
 .custom-checkbox{
    font-size: 0;
 }
/* 自定义checkbox的外观 */
.custom-checkbox .checkmark {
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid #fff;
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.4);
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
 .checkmark svg {
     display: none;
 }
/* 当checkbox被选中时，显示一个☑ */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
  width: 16px;
  height: 16px;
  background: #165DFF;
  border:none;
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark svg{
  width: 16px;
  height: 16px;
  display: block;
}
.fade-leave,
.fade-enter-to {
  opacity: 1;
}
.fade-leave-active,
.fade-enter-active {
  transition: all 0.5s;
}
.fade-leave-to,
.fade-enter {
  opacity: 0;
}

.no-video{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 75vh;
}

.R_video_content {
  overflow: auto;
  padding: 20px;
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* gap: 12px; */
  /* display: grid;
    grid-column: span 4;
    grid-template-columns: repeat(4,1fr); */
  /* grid-gap: 20px; */
}
.video_item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px 12px 14px 14px;
}
.video_item {
  background: #000;
  position: relative;
  border-radius: 12px 12px 14px 14px;
  height: 411px;
}
.video_img {
  height: 100%;
  width: 100%;
}
.video_info {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  padding: 8px;
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border: 1px solid #e8eaec;
}
.info_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}
.info_btn{
   gap: 8px;
}
.info_btn span {
  /* width: 33.33%; */
  padding: 4px 11px;
  gap: 2px;
  background: #f8f8f9;
  border-radius: 8px;
  font-size: 12px;
  color: #5c636c;
  cursor: pointer;
  justify-content: center;
  flex-grow: 1;
}
.popover_item{
    padding-left: 4px;
    cursor: pointer;
    line-height: 36px;
    gap: 8px;
}
.popover_item:hover{
  background: #F8F8F9;
  border-radius: 6px;
}
.video-box {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  border-radius: 14px;
}
.duration {
  position: absolute;
  right: 8px;
  top: 12px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 6px;
  font-size: 12px;
  color: #fff;
}
.duration-L {
  position: absolute;
  left: 8px;
  top: 12px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px;
  font-size: 12px;
  color: #fff;
}
.like_icon{
  cursor: pointer;
  position: absolute;
  left: 36px;
  top: 12px;
  background: rgba(0, 0, 0, 0.30);
  border-radius: 4px;

}


@media (min-width: 600px) {
  .video_item {
    width: 48%;
  }
}

@media (min-width: 884px) {
  .video_item {
    width: 48.4%;
  }

  .FfhqcJl0 .xaO72heB .BdmN01E5 {
    width: 50%;
  }

  .FfhqcJl0 .YN8AushA {
    width: 33.3%;
  }
}
/*(min-width: 1140px) {*/
@media (min-width: 1260px) {
  .video_item {
    /* width:23.6% */
    width: 32.1%;
  }

  .FfhqcJl0 .xaO72heB .BdmN01E5 {
    width: 33%;
  }

  .FfhqcJl0 .YN8AushA {
    width: 25%;
  }
}
/*  (min-width: 1596px) { */
@media (min-width: 1783px) {
  .video_item {
    /* width: 19.1%; */
    width: 19.13%;
  }

  .FfhqcJl0 .xaO72heB .BdmN01E5 {
    width: 25%;
  }

  .FfhqcJl0 .YN8AushA {
    width: 20%;
  }
}
/* (min-width: 2232px) { */
@media (min-width: 2309px) {
  .video_item {
    /* width:19.4%; */
    width: 13.69%;
  }

  .FfhqcJl0 .xaO72heB .BdmN01E5 {
    width: 20%;
  }

  .FfhqcJl0 .YN8AushA {
    width: 16.66%;
  }
}

@media (min-width: 2472px) {
  .pfNykl7A {
    width: 2256px;
    margin: 24px auto;
  }
}
</style>